<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            /* 2.文本对齐 */
    /* 左对齐,右对齐,居中对齐
         
此处的对齐,指的是"水平方向"的对齐,不是垂直方向

对齐属性只能实现这三种效果.
如果想要实现"在左侧三分之一位置对齐"这种就需要搭配其他的属性了 */
        .one{
            text-align: left;
        }
        .two{
            text-align:right;
        }
        .three{
            text-align:center;
        }

        /* 3.文本装饰

下划线,上划线,删除线...
更常用的用法,不是说给元素加上这些线,而是给已经呆了线的元素给去掉

典型的就是a标签(a标签默认的样式就是带下划线的) */
    .one2{
        text-decoration: none;
    }
    .two2{
        text-decoration: underline;
    }
    .three2{
        text-decoration:overline;
    }
    .four2{
        text-decoration: line-through;
    }
    a{
        text-decoration: none;
        color:#666
    }
    /* 4.文本缩进
p段落中一般咱们希望第一行能够缩进两个字
根据字体大小来设置缩进的像素数量
text-indent
只是控制首行的缩进,对于其他行不影响

em也是一个单位,是以当前字体大小为基准的.
1em就表示尺寸和字体大小一样(字是20px,1em就是20px)
2em就表示尺寸是字体的2倍
(相对数值)(字是20px,那么2em就是40px)
0.8em就表示字体大小的0.8倍,字是20px,0.8em就是16px */
    p{
        font-size: 16px;
        /* text-indent:32px; */
        text-indent: 2em;
    }
    </style>
</head>
<body>
    <div class="one">
        左对齐
    </div>
    <div class="two">
        右对齐
    </div>
    <div class="three">
        居中对齐
    </div>


    <div class="one2">
        正常
    </div>

    <div class="two2">
        下划线
    </div>

    <div class="four2">
        删除线
    </div>
    
    <div class="three2">
        上划线
    </div>

    <a href="#" class="a">这是一个a标签</a>

    <p>
        很长的一段话Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse, culpa quidem. Assumenda earum sapiente labore at obcaecati accusantium ex soluta mollitia aperiam repellendus in distinctio, minus omnis sit consequuntur odio!
    </p>
</body>
</html>